<template>
  <div>
    <div class="search">
      <el-input
        style="width: 200px; margin-right: 10px"
        size="small"
        v-model="form.name"
        placeholder="请输入品牌名称"
      ></el-input>
      <el-button type="info" size="small" @click="chaxun()" plain
        >查询</el-button
      >
      <el-button type="warning" size="small" @click="chongzhi()" plain
        >重置</el-button
      >
      <el-button
        type="primary"
        @click="add()"
        style="float: right"
        size="small"
        plain
        >新增</el-button
      >
    </div>
    <div class="table">
      <el-table :data="tabledata">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="品牌名" prop="name"></el-table-column>
        <el-table-column label="品牌icon" prop="icon">
            <template slot-scope="scope">
                 <el-image 
    style="width: 100px; height: 100px"
    :src="scope.row.icon" 
    :preview-src-list="[scope.row.icon]">
  </el-image>
            </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="bj(scope.row)" plain>编辑</el-button>
            <el-button type="danger" @click="shanchu(scope.row)" plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog width="30%" :title="title" :visible="dialogVisible">
      <el-form :model="form1">
        <el-form-item label="品牌名称">
          <el-input placeholder="请输入" v-model="form1.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌icon">
          <el-upload
            class="avatar-uploader"
            action="http://demonuxtapi.dishait.cn/admin/s/upload"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form1.icon" :src="form1.icon" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="save()" type="primary">确定</el-button>
          <el-button plain @click="reset()" >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import service from "../request";

export default {
  data() {
    return {
      form: {
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      title: "新增",
      form1: {
        icon: "",
      },
      dialogVisible1: false,
      dialogVisible: false,
      headers: {
        token:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6IjQ1NioqKkBxcS5jb20iLCJwaG9uZSI6IjEzNyoqKio1NDQ5IiwiaWQiOjEsInVzZXJuYW1lIjoiY2VzaGkxIiwibmlja25hbWUiOiIiLCJwYXNzd29yZCI6IjA5MTNmYWIyOWY4YWE5MmY5N2ZlNjQ2ODM5NDA5ZjM3MjZjNGQzZGM2NGY0NDlmMTA2MjJhNTUwMGM3NDBjMDIiLCJhdmF0YXIiOiIiLCJ3ZWl4aW5fdW5pb25pZCI6bnVsbCwic2V4Ijoi5pyq55-lIiwiZGVzYyI6IiIsInN0YXR1cyI6MSwiY3JlYXRlZF90aW1lIjoiMjAyMS0wMi0yMVQxNDowNDowMi4wMDBaIiwidXBkYXRlZF90aW1lIjoiMjAyMy0xMC0wNFQxNjo0ODo0MC4wMDBaIiwiaWF0IjoxNjk4NTYyOTU4fQ.MLAxkr9JkR9lIxEZbufSuBDB_kz-GR8UYEvwB3NslcA",
        schoolid: "11",
      },
      total: 0,
      tabledata: [],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
      shanchu(row){
          this.$confirm('是否确认删除？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {

					const res = await service.get(`/index/shanchupp`,{
                        params:{
                            id:row.id
                        }
                    });
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.getdata();
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
      },
      reset(){
          this.form1={};
          this.dialogVisible=false
      },
     async save(){
          const res=await service.post("index/savepp",this.form1);
          if(res.code == 200){
              this.$message.success(`${res.msg}`);
          this.dialogVisible=false
          this.getdata()
          }
      },
    add() {
      this.title = "新增";
      this.dialogVisible = true;
      this.form1 = {
        name: "",
        icon: "",
      };
    },
    bj(row){
        this.title="编辑"
        this.dialogVisible=true;
        this.form1=JSON.parse(JSON.stringify(row))
    },
    handleAvatarSuccess(e) {
      console.log(e);
      this.form1.icon = e.data;
      console.log(this.form1.icon);
    },
    handleCurrentChange(e) {
      this.form.pageNum = e;
      this.getdata();
    },
    handleSizeChange(e) {
      this.form.pageSize = e;
      this.getdata();
    },
    fj(row) {
      this.form1 = JSON.parse(JSON.stringify(row));
      this.form1.fjly = "";
      this.form1.status = "1";
      this.dialogVisible1 = true;
    },
    async fjqd() {
      const res = await service.post("/index/adduser", this.form1);
      console.log(res);
      if (res.code == 200) {
        this.$message.success("修改成功");
        this.dialogVisible1 = false;
        this.getdata();
      }
    },
    async shenheqd() {
      const res = await service.post("/index/adduser", this.form1);
      console.log(res);
      if (res.code == 200) {
        this.$message.success("修改成功");
        this.dialogVisible = false;
        this.getdata();
      }
    },
    sh(row) {
      this.form1 = JSON.parse(JSON.stringify(row));

      this.form1.status = "";
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose1() {
      this.dialogVisible1 = false;
    },
    chongzhi() {
      this.form = {
        name: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.getdata();
    },
    chaxun() {
      this.getdata();
    },
    async getdata() {
      const res = await service.get("/index/pinpai", {
        params: this.form,
      });
      console.log(res);
      this.tabledata = res.data;
      this.total = res.total;
    },
  },
};
</script>
<style>
.el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>